<template>
    <div class="w-full box-border p-16px">
        <div class="page_top">
            <div class="left_btn" @click="back">
                <img src="../../assets/image/back.png" alt="" />
            </div>
            <crumbs basetitle="工具" title="推广海报"></crumbs>
        </div>
        <div class="outbox">
            <div class="tab">
                <div :class="{ tabItem: true, activeTab: tabIndex === 0 }" @click="onChangeTab(0)">活动海报</div>
                <div :class="{ tabItem: true, activeTab: tabIndex === 1 }" @click="onChangeTab(1)">推广海报</div>
            </div>
        </div>
        <div class="head-container mg-t-20" v-if="tabIndex === 0">
            <div v-for="(i, index) in dataList" :key="index" class="header pointer flex items-center mg-b-20"
                @click="i.handle && i.handle()">
                <el-card class="left">
                    <img crossorigin="anonymous" :src="getAssetUrl(i.img)" class="icon-head" alt="" />
                    <div class="flex flex-jc-sb items-center mg-t-16">
                        <div class="name fs-14 bold" :title="i.name">
                            {{ i.name }}
                        </div>
                        <div class="date fc-lightgray fs-12">
                            发布时间：{{ i.publishTime }}
                        </div>
                    </div>
                </el-card>
                <div class="right flex-1">
                    <div class="header bold flexbt">
                        <div>数据表现</div>
                        <el-button type="primary" v-if="i.bunfn" @click.stop="i.bunfn" size="small">{{ i.btntext
                            }}</el-button>
                    </div>
                    <div class="flex mg-t-30">
                        <div v-for="(item, idx) in i.dataList" :key="idx" class="item flex-1">
                            <div class="title fc-lightgray">
                                {{ item.name }}
                            </div>
                            <div class="value mg-t-20 mg-b-20 bold fs-24">
                                {{ item.value ?? 0 }}
                            </div>
                            <img class="icon-chart" crossorigin="anonymous" :src="getAssetUrl(item.iconUrl)" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="posterbox head-container mg-t-20" v-if="tabIndex === 1">
            <div class="posterItem" v-for="(item, i) in posterList" :key="i">
                <div class="h-210px overflow-auto hidescrollline">
                    <el-image class="posterimg" :src="item.dictValue" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                        :preview-src-list="[item.dictValue]" :initial-index="4" fit="cover" />
                </div>
                <div class="mg-t-16 fc202536 flex-c-justify-between">

                    <div>{{ item.dictLabel }}</div>
                    <img src="../../assets/image/delc.png" class="wh-16" alt="" @click="onDelPoster(item.dictCode)">
                </div>
                <div class="fc9E9E9E fs-14 mg-t-10">{{ item.createTime }}</div>
            </div>
            <div class="posterItem" v-if="false">
                <img src="https://pic.imgdb.cn/item/660cc4df9f345e8d03afb78b.jpg" class="posterimg" alt="">
                <div class="mg-t-16 fc202536 flex-c-justify-between">

                    <div>模版1</div>
                    <img src="../../assets/image/delc.png" class="wh-16" alt="">
                </div>
                <div class="fc9E9E9E fs-14 mg-t-10">2024-01-28</div>
            </div>
            <div class="posterItem" v-if="false">
                <img src="https://pic.imgdb.cn/item/660cc5199f345e8d03b105ec.jpg" class="posterimg" alt="">
                <div class="mg-t-16 fc202536 flex-c-justify-between">

                    <div>模版1</div>
                    <img src="../../assets/image/delc.png" class="wh-16" alt="">
                </div>
                <div class="fc9E9E9E fs-14 mg-t-10">2024-01-28</div>
            </div>
            <div class="posterItem" v-if="false">
                <img src="https://pic.imgdb.cn/item/660cc5149f345e8d03b0ea92.jpg" class="posterimg" alt="">
                <div class="mg-t-16 fc202536 flex-c-justify-between">

                    <div>模版1</div>
                    <img src="../../assets/image/delc.png" class="wh-16" alt="">
                </div>
                <div class="fc9E9E9E fs-14 mg-t-10">2024-01-28</div>
            </div>
            <div class="posterItem" v-if="false">
                <img src="https://pic.imgdb.cn/item/660cc5199f345e8d03b105ec.jpg" class="posterimg" alt="">
                <div class="mg-t-16 fc202536 flex-c-justify-between">

                    <div>模版1</div>
                    <img src="../../assets/image/delc.png" class="wh-16" alt="">
                </div>
                <div class="fc9E9E9E fs-14 mg-t-10">2024-01-28</div>
            </div>
            <div class="posterItem" v-if="false">
                <img src="https://pic.imgdb.cn/item/660cc5099f345e8d03b0a3b8.jpg" class="posterimg" alt="">
                <div class="mg-t-16 fc202536 flex-c-justify-between">

                    <div>模版1</div>
                    <img src="../../assets/image/delc.png" class="wh-16" alt="">
                </div>
                <div class="fc9E9E9E fs-14 mg-t-10">2024-01-28</div>
            </div>
            <div class="posterItem" v-if="false">
                <img src="https://pic.imgdb.cn/item/660cc5199f345e8d03b105ec.jpg" class="posterimg" alt="">
                <div class="mg-t-16 fc202536 flex-c-justify-between">

                    <div>模版1</div>
                    <img src="../../assets/image/delc.png" class="wh-16" alt="">
                </div>
                <div class="fc9E9E9E fs-14 mg-t-10">2024-01-28</div>
            </div>
            <div class="posterItem" v-if="false">
                <img src="https://pic.imgdb.cn/item/660cc4d99f345e8d03af9753.jpg" class="posterimg" alt="">
                <div class="mg-t-16 fc202536 flex-c-justify-between">

                    <div>模版1</div>
                    <img src="../../assets/image/delc.png" class="wh-16" alt="">
                </div>
                <div class="fc9E9E9E fs-14 mg-t-10">2024-01-28</div>
            </div>
            <div class="posterItem" v-if="false">
                <img src="https://pic.imgdb.cn/item/660cc50d9f345e8d03b0c067.jpg" class="posterimg" alt="">
                <div class="mg-t-16 fc202536 flex-c-justify-between">
                    <div>模版1</div>
                    <img src="../../assets/image/delc.png" class="wh-16" alt="">
                </div>
                <div class="fc9E9E9E fs-14 mg-t-10">2024-01-28</div>
            </div>
            <div class="posterItem border-point addposteroutbox" @click="onOpendialogVisible">
                <img src="../../assets/image/uploadvideo.png" alt="">
                <div class="addposter">
                    <img class="wh-16" src="../../assets/image/add.png" alt="">
                    <div>上传海报</div>
                </div>
            </div>
        </div>
        <!-- 上传图片弹窗 -->
        <el-dialog v-model="dialogVisible" title="上传海报" width="500" :before-close="handleClose">
            <el-upload ref="upload" class="upload-demo" :data="uploadData" :action="action" :headers="headers"
                :file-list="fileList" :before-upload="handleBeforeUpload" :auto-upload="false" drag
                accept=".png,.jpeg,.jpg,.pdf" :limit="1" :on-exceed="handleExceed" multiple>
                <img src="../../assets/image/uploadvideo.png" alt="">
                <div class="el-upload__text">
                    将海报拖到此处，或<em>点击上传</em>
                </div>
                <template #tip>
                    <div class="el-upload__tip">
                        <el-input v-model="posterName" maxlength="4" show-word-limit placeholder="请输入模板名称" />
                    </div>
                </template>
            </el-upload>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="handleClose">取消</el-button>
                    <el-button type="primary" @click="onSubmit">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import crumbs from '../../components/crumbs.vue'
import { ref, onMounted, onActivated, computed } from 'vue'
import { useRouter } from 'vue-router'
import { queryAdvertiseList, exportjapanapplyapi, exportsubscribecustomer, exportHrApplyApi, getPromotionalPosterListApi, delPosterApi, uploadPosterApi } from '@/api/activity/index'
import baseurl from '../../api/env'
import { ElMessage } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { genFileId } from 'element-plus'
const upload = ref<UploadInstance>()
const posterList = ref([] as any)
const handleExceed: UploadProps['onExceed'] = (files) => {
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    upload.value!.handleStart(file)
}
const router = useRouter()
const tabIndex = ref(0)
const posterName = ref('')
const fileList = ref('')
const dialogVisible = ref(false)
const onOpendialogVisible = () => {
    dialogVisible.value = true
}
const getBase64 = (file: Blob) => {
    return new Promise((resolve, reject) => {
        const reader = new FileReader()
        let fileResult = ''
        reader.readAsDataURL(file)
        //开始转
        reader.onload = function () {
            fileResult = reader.result as any
        }
        //转 失败
        reader.onerror = function (error) {
            reject(error)
        }
        //转 结束  咱就 resolve 出去
        reader.onloadend = function () {
            resolve(fileResult)
        }
    })
}
const uploadData = () => {
    return {
        name: posterName.value
    }
}
const action = computed(() => {
    return baseurl + ''
})
const headers = computed(() => {
    return {
        Authorization: 'Bearer ' + sessionStorage.getItem('token') || ''
    }
})
const dialogVisibleInit = () => {
    posterName.value = ''
    dialogVisible.value = false
}
const handleClose = () => {
    dialogVisibleInit()
}
const handleBeforeUpload = async (file: File) => {
    console.log(2121, file)
    const res = await getBase64(file)
    await uploadPosterApi({ posterName: posterName.value, posterUrl: (res as any).split('base64,')[1] })
    ElMessage.success('上传成功')
    getPromotionalPosterList()
    dialogVisibleInit()
    return false
}
const onSubmit = () => {
    if (!posterName.value) {
        ElMessage.warning('请输入模板名称')
        return false
    }
    upload.value?.submit()
}
const onDelPoster = async (val: number | string) => {
    await delPosterApi(val)
    ElMessage.success('删除成功')
    getPromotionalPosterList()
}
const onChangeTab = (i: number) => {
    tabIndex.value = i
    if (i === 1) {
        getPromotionalPosterList()
    }
}
const getPromotionalPosterList = async () => {
    getPromotionalPosterListApi({ dictType: 'saas_promotion_poster' }).then((res: any) => {
        console.log(res, 'fasdghvfgyhs')
        posterList.value = res
    })
}
const dataList = ref([
    {
        type: 4,
        img: 'dy/img5.png',
        name: '',
        publishTime: '',
        dataList: {
            applyCount: {
                name: '预约量(次)',
                value: 0,
                iconUrl: 'dashboard/line-1.png'
            }
        },
        bunfn: () => {
            exportHrApplyApi().then((res: any) => {
                console.log(res)
                window.location.href =
                    baseurl + '/common/download?delete=true&fileName=' + res
            })
        },
        btntext: '导出申请表',
    },
    {
        type: 3,
        img: 'dy/img4.png',
        name: '',
        publishTime: '',
        dataList: {
            applyCount: {
                name: '预约量(次)',
                value: 0,
                iconUrl: 'dashboard/line-1.png'
            }
        },
        bunfn: () => {
            exportsubscribecustomer().then((res: any) => {
                console.log(res)
                window.location.href =
                    baseurl + '/common/download?delete=true&fileName=' + res
            })
        },
        btntext: '导出申请表',
        handle() {
            router.push('/productReservationc')
        }
    },
    {
        type: 2,
        img: 'dy/img3.png',
        name: '',
        publishTime: '',
        dataList: {
            clickCount: {
                name: '点击量(次)',
                value: 0,
                iconUrl: 'dashboard/line-1.png'
            },
            applyCount: {
                name: '报名人数（人）',
                value: 0,
                iconUrl: 'dashboard/line-2.png'
            }
        },
        btntext: '导出报名表',
        bunfn: () => {
            exportjapanapplyapi().then((res: any) => {
                console.log(res)
                window.location.href =
                    baseurl + '/common/download?delete=true&fileName=' + res
            })
        },
        handle() {
            return
        }
    },
    {
        type: 1,
        img: 'dy/img2.png',
        name: '',
        publishTime: '',
        dataList: {
            exposureCount: {
                name: '曝光量(次)',
                value: 0,
                iconUrl: 'dashboard/line-1.png'
            },
            shareCount: {
                name: '分享量(次)',
                value: 0,
                iconUrl: 'dashboard/line-2.png'
            },
            infoCount: {
                name: '信息量(次)',
                value: 0,
                iconUrl: 'dashboard/line-3.png'
            },
            dealCount: {
                name: '成交量(次)',
                value: 0,
                iconUrl: 'dashboard/line-4.png'
            },
            rebateAmount: {
                name: '返现金额(元)',
                value: 0,
                iconUrl: 'dashboard/line-5.png'
            },
            dealAmount: {
                name: '成交金额(元)',
                value: 0,
                iconUrl: 'dashboard/line-5.png'
            }
        },
        handle() {
            router.push('/annullyPromote')
        }
    },
    {
        type: 0,
        img: 'dy/img1.png',
        name: '',
        publishTime: '',
        dataList: {
            exposureCount: {
                name: '曝光量(次)',
                value: 0,
                iconUrl: 'dashboard/line-1.png'
            },
            clickCount: {
                name: '点击量(次)',
                value: 0,
                iconUrl: 'dashboard/line-2.png'
            },
            callCount: {
                name: '拨号量(次)',
                value: 0,
                iconUrl: 'dashboard/line-3.png'
            },
            dealCount: {
                name: '成交量(次)',
                value: 0,
                iconUrl: 'dashboard/line-4.png'
            },
            dealAmount: {
                name: '成交金额(元)',
                value: 0,
                iconUrl: 'dashboard/line-5.png'
            }
        },
        handle() {
            router.push('/dybaobai')
        }
    }
]) as any

const getAssetUrl = (url: string) => {
    console.log(3333, url)
    return new URL(`../../assets/image/${url}`, import.meta.url).href
}

const getData = () => {
    queryAdvertiseList({}).then((res: any) => {
        if (res?.length) {
            res.forEach((i: any) => {
                for (const key of dataList.value) {
                    if (parseInt(key.type) === i.type) {
                        key.name = i.advertiseName
                        key.publishTime = i.activityTime
                        for (const key1 in key.dataList) {
                            key.dataList[key1].value = i[key1]
                        }
                    }
                }
            })
        }
    })
}

onMounted(() => {
    getData()
})
onActivated(() => { })
const tghbtabledate = ref<any>([])
const back = () => {
    window.history.back()
}
</script>

<style lang="scss" scoped>
.posterbox {
    width: 100%;
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    .posterItem {
        height: 300px;
        width: 220px;
        box-sizing: border-box;
        padding: 12px;
        background-color: #FFFFFF;
        border-radius: 16px;
    }
}

.outbox {
    margin-top: 24px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tab {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 50px;
}

.tabItem {
    font-size: 14px;
    box-sizing: border-box;
    padding: 10px 20px;
    color: #9E9E9E;
    border-radius: 4px;
}

.activeTab {
    background-color: #0256FF !important;
    color: #FFFFFF !important;
    font-weight: 700;
}

.container {
    padding: 20px;
    box-sizing: border-box;
}

.left {
    width: 362px;
    height: 228px;
    border-radius: 8px;
    background: #fff;
    // padding: 16px 16px 44px;
}

.right {
    height: 228px;
    border-radius: 8px;
    background: #f7fbfe;
    margin-left: 16px;
    padding: 24px;
    box-sizing: border-box;
}

.name {
    width: 8em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flexbt {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fc9E9E9E {
    color: #9E9E9E;
}

.fc202536 {
    color: #202536;
}

.flex-c-justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wh-16 {
    width: 16px;
    height: 16px;
}

.border-point {
    border: 1px dashed #C4C6CE;
}

.addposteroutbox {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.addposter {
    width: 132px;
    height: 32px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0256FF;
    color: #ffffff;
    border-radius: 4px;
    cursor: pointer;
    gap: 8px;
}

.posterimg {
    width: 100%;
    height: auto
}

.blue {
    color: #0256FF;
}

.hidescrollline::-webkit-scrollbar {
    display: none;
    -ms-overflow-style: none;
    /* 隐藏滚动条 */
    scrollbar-width: none;
    /* 隐藏滚动条 */
}
</style>
